<template>
  <div class="user-container">
    <div class="user-top">
      <div class="user-search">
        <el-input
          placeholder="请输入关键字"
          v-model="queryParams.key"
          @keyup.native.enter="search"
          size="small"
          @clear="search"
          clearable
        ></el-input>
        <el-select
          v-model="queryParams.user_type"
          clearable
          @change="search"
          class="search-select"
          placeholder="请选择"
          size="small"
        >
          <el-option v-for="item in userFilter" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
    </div>

    <el-scrollbar style="height: calc(100vh - 190px)" class="scrollbar" id="scroll-bar">
      <el-table :data="list">
        <el-table-column label="用户id" prop="data_id"></el-table-column>
        <el-table-column label="用户名" prop="name"></el-table-column>
        <el-table-column label="手机号" prop="cellphone"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="性别" prop="gender">
          <template slot-scope="scope">
            {{ scope.row.gender === 1 ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column label="注册时间" prop="create_time"></el-table-column>
        <el-table-column label="用户类型" prop="user_type">
          <template slot-scope="scope">
            {{ userType[scope.row.user_type] }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="340">
          <template slot-scope="scope">
            <el-button type="primary" @click="updSpecialSub(scope.row.data_id, scope.row)" size="mini">修改</el-button>
            <el-button type="danger" @click="delSpecialSub(scope.row.data_id)" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog @closed="onClose" title="修改用户" :visible.sync="isShowDialog">
        <el-form :model="params" :rules="rules" ref="dataParams" label-width="80px" class="demo-dataParams">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="params.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="cellphone">
            <el-input v-model="params.cellphone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="params.email"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="params.gender">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="用户类型" prop="user_type">
            <el-select v-model="params.user_type" placeholder="请选择用户类型">
              <el-option
                v-for="item in userFilter"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowDialog = false">取 消</el-button>
          <el-button type="primary" @click="dialogConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </el-scrollbar>

    <paging ref="page" :func="getList"></paging>
  </div>
</template>

<script>
  import { validEmail, validPhone, isAccout } from '@/utils/validate'
  import paging from '@/components/paging';
  import userManage from '@/api/user';
  export default {
    name: 'user-view',
    components: {
      paging,
    },
    data() {
      const validatorEmail = (rule, value, callback) => {
        if (value === '' || validEmail(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式！'))
        }
      }
      const validateTelPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'))
        }
        if (!validPhone(value)) {
          callback(new Error('您输入的手机号格式不正确'))
        } else {
          callback()
        }
      }
      return {
        list: [],
        queryParams: {
          key: '',
          user_type: '',
        },
        userFilter: [
          { value: 0, label: '管理员' },
          { value: 1, label: '普通用户' },
          { value: 2, label: '艺术家' },
        ],
        userType: {
          0: '管理员',
          1: '普通用户',
          2: '艺术家',
        },
        params: {
          name: '',
          cellphone: '',
          email: '',
          gender: 1,
          user_type: 1
        },
        rules: {
          name: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
          gender: [{ required: true, message: '请选择用户性别', trigger: 'blur' }],
          user_type: [{ required: true, message: '请选择用户类型', trigger: 'blur' }],
          email: [
            { required: true, validator: validatorEmail }
          ],
          cellphone: [
            { required: true, message: '手机号不能为空', trigger: 'blur' },
            { validator: validateTelPhone, trigger: 'blur' }
          ],
          // cellphone: [{ required: true, trigger: 'blur', validator: checkPhone }],
        },
        isShowDialog: false
      };
    },
    async mounted() {
      this.refresh();
    },
    methods: {
      onClose() {
        this.isShowDialog = false
        this.dataParams = {
          name: '', // 姓名
          email: '', // 邮箱
          cellphone: '', // 手机号
        }
      },
      updSpecialSub(id, data) {
        console.log(id, data)
        this.isShowDialog = true
        this.params = {
          ...data,
          id
        }
      },
      delSpecialSub(id) {
        this.$alert('是否确定删除该用户', '删除', {
          confirmButtonText: '确定',
          callback: async (action) => {
            if (action === 'confirm') {
              await userManage.deleteUser({ id })
              this.$message.success('删除成功')
              this.refresh();
            }
          },
        });
      },
      async dialogConfirm() {
        this.$refs.dataParams.validate(async (valid) => {
          if (valid) {
            const data = {
              name: this.params.name,
              cellphone: this.params.cellphone,
              email: this.params.email,
              gender: this.params.gender,
              user_type: this.params.user_type,
              id: this.params.id
            }
            let res = await userManage.updateUserInfo({...data})
            this.$message.success('修改成功')
            this.refresh()
            this.onClose()
          } else {
            return false
          }
        })
      },
      refresh() {
        this.$refs.page.refresh();
      },
      search() {
        this.$refs.page.search();
      },
      getList(callback) {
        this.list = [];
        userManage.getUserInfo(this.queryParams).then((res) => {
          let total = res.total_count;
          this.list = res.item_list;
          callback(this.list, total);
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  .user-container {
    height: 100%;

    ::v-deep(.el-dialog__footer) {
      text-align: center;
    }

    ::v-deep(.el-input__inner) {
      width: 100%;
    }

    ::v-deep(.el-select) {
      width: 100%;
    }
    .user-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .user-search {
        display: flex;
        .search-select {
          margin-left: 12px;
        }
      }
    }
  }
</style>
